//公共css
page {
  font-family: 'PingFangSC-Thin Microsoft YaHei';
}

@mixin button {
  user-select: none;

  /* 火狐 */
  user-select: none;

  /* webkit浏览器 */
  user-select: none;

  /* IE10 */
  user-select: none;

  /* 早期浏览器 */
  cursor: pointer;

  &:active {
    background-image: linear-gradient(rgb(255 255 255 / 15%), rgb(255 255 255 / 15%));
  }
}

@mixin single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin manny($num) {
  display: box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
  overflow: hidden;
}

@mixin box-shadow {
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
}

// 水平垂直居中
@mixin view-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

//单行超出省略号
@mixin ellipse {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin flex-row {
  display: flex;
  flex-direction: row;
}

@mixin flex-col {
  display: flex;
  flex-direction: column;
}

.ellipse {
  @include ellipse;
}

.view-center {
  @include view-center;
}

.flex-row {
  @include flex-row;
}

.flex-col {
  @include flex-col;
}

.flex-row-center {
  @include flex-row;

  justify-content: center;
}

.flex-col-center {
  @include flex-col;

  justify-content: center;
}

.flex-align-center {
  align-items: center;
}
